<template>
  <div class="expitembox itemC mbox">
    <div class="container">
      <div class="bgbox" ref="bgbox">
        <div class="bg clmcenter" :style="{ width: bgW + 'px' }">
          <img
            src="@/assets/img/CN/itemC/bg.jpg"
            class="bgimg"
            ref="bgimg"
            @load="bgLoaded"
          />
          <img
            src="@/assets/img/point.gif"
            class="point point1"
            @click="toShowTk('c1')"
          />
        </div>
      </div>
    </div>
    <!-- 自动弹窗 -->
    <EnterDialog
      @closedialog="closeDialog"
      v-show="entershow"
      :src="require('@/assets/img/CN/itemC/c0.png')"
    />
    <!-- 触点1 -->
    <div class="tkbox tkboxA clmstart" v-show="pointshow">
      <img
        src="@/assets/img/close.png"
        class="close"
        @click="pointshow = false"
      />
      <img :src="cimg" class="cimg" />
      <div class="videobox clmcenter">
        <video
          src="https://cdn.mahelei.com/BASF/media/itemC/v1.mp4"
          initial-time="0"
          poster="https://cdn.mahelei.com/BASF/media/itemC/poster.jpg"
          preload="auto"
          controls
          webkit-playsinline="true"
          x-webkit-airplay="true"
          playsinline="true"
          x5-playsinline="true"
          x5-video-orientation="portraint"
          ref="video"
        ></video>
        <!-- <img src="@/assets/img/play.png" class="play" v-show="playflag" /> -->
      </div>
    </div>
    <!-- 左右滑动提示 -->
    <ViewTips :lang="'cn'" v-show="tipshow" />
  </div>
</template>
<script>
import { importDialog } from "@/mixin.js";
import ViewTips from "@/components/ViewTips.vue";
export default {
  data() {
    return {
      pointshow: false, //触点
      tab: 0,
      bgW: 0,
      cimg: null,
      nowId: null,
      playflag: true, //播放按钮
      tipshow: false, // 左右滑动提示
    };
  },
  methods: {
    // 关闭自动弹窗
    closeDialog() {
      this.entershow = false;
      this.tipshow = true;
      let timer = setTimeout(() => {
        this.tipshow = false;
        clearTimeout(timer);
      }, 2000);
    },
    // 背景图加载完毕
    bgLoaded() {
      this.bgW = this.$refs.bgimg.offsetWidth;
      this.$nextTick(() => {
        this.$refs.bgbox.scrollLeft = this.bgW / 4;
      });
    },
    // 开启弹窗
    toShowTk(id) {
      this.nowId = id;
      this.cimg = require(`@/assets/img/CN/itemC/${id}.png`);
      this.pointshow = true;
    },
    // 视频播放
    videoTogglePlay() {
      let video = this.$refs.video;
      if (video.paused) {
        video.play();
        this.playflag = false;
      } else {
        video.pause();
        this.playflag = true;
      }
    },
  },
  mixins: [importDialog],components: { ViewTips },
};
</script>
<style lang="less" scoped>
.itemC {
  .container {
    .bgbox {
      .bg {
        .point1 {
          margin-right: 4rem;
          margin-bottom: 2rem;
        }
      }
    }
  }
  .tkbox {
    .videobox {
      position: relative;
      width: 680px;
      height: 382.5px;
      margin: 2rem auto 4rem;
      video {
        width: 640px;
        height: 360pc;
        object-fit: contain;
      }
      .play {
        position: absolute;
        width: 80px;
      }
    }
  }
}
</style>
